﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>demo open door</title>
    <link href="css/reset.source.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        html, body { width: 100%; height: 100%; background-color: Gray; }
        
        #demo { width: 100%; height: 200px; }
        #demo .p_left { width: 50%; height: 100%; background-color: Red; float: left; z-index:1; overflow:hidden; }
        #demo .p_right { width: 50%; height: 100%; background-color: Blue; float: right; z-index:1; overflow:hidden; }
    </style>
    <script src="../js/jquery-1.4.min.js" type="text/javascript"></script>
    <script src="../js/jquery.easing.1.3.js" type="text/javascript"></script>
    <script src="../js/modernizr-2.0.6.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        jQuery(document).ready(function () {

            jQuery.easing.def = 'easeOutBounce';

            function door_close() {
                $(".p_left,.p_right").stop().animate({ width: '50%', opacity: '100%' }, 4000, 'easeOutBounce');
            }

            function door_open() {
                $(".p_left,.p_right").stop().animate({ width: '5px', opacity: 'toggle' }, 4000, 'easeOutBounce');
            }

            $("#Button1").click(door_open);
            $("#Button2").click(door_close);

        });

    </script>
</head>
<body>
    <div id="toolpanel">
        <input id="Button1" type="button" value="open door" />
        <input id="Button2" type="button" value="close door" />
        <div id="block">
            Hello!</div>
    </div>
    <div id="demo">
        <div class="p_left">
            left
        </div>
        <div class="p_right">
            right
        </div>
    </div>
</body>
</html>
